<template>
  <el-dialog :title="dialogTitle" :visible.sync="childVisible" :before-close="closeDialog" :close-on-click-modal="false"
    width="500px">
    <el-form ref="childForm" :model="childForm" :rules="rules">
      <el-form-item label="一级品类：" label-width="140px" prop="parentid">
        <el-select v-model="childForm.parentid" placeholder="请选择" disabled>
          <el-option v-for="(item, index) in firstLevel" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="品类名称：" label-width="140px" prop="name">
        <el-input v-model="childForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上传封面：" label-width="140px" prop="image">
        <crop-upload show-type="photo" :init-val="childForm.image" file-size="100K" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl(val)" />
      </el-form-item>
      <!-- <el-form-item
        label="图片链接："
        label-width="140px"
        prop="link"
      >
        <el-input
          v-model="childForm.link"
          autocomplete="off"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="状态:" label-width="130px" prop="enabled">
        <el-radio v-model="childForm.enabled" :label="1">显示</el-radio>
        <el-radio v-model="childForm.enabled" :label="0">隐藏</el-radio>
      </el-form-item>
      <el-form-item label="排序：" label-width="140px" prop="displayorder">
        <el-input v-model="childForm.displayorder" autocomplete="off" />
      </el-form-item>
      <el-form-item label="租赁类目：" label-width="140px" prop="rent_category">
        <el-select v-model="childForm.rent_category" placeholder="请选择">
          <el-option v-for="(item, index) in rent_list" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="租赁宝类目：" label-width="140px" prop="zlb_class">
        <el-select v-model="childForm.zlb_class" placeholder="请选择">
          <el-option v-for="item in zlb_list" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="保险类目：" label-width="140px" prop="insurance_category">
        <el-select v-model="childForm.insurance_category" placeholder="请选择">
          <el-option v-for="(item, index) in insure_list" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm('childForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String,
      default: ''
    },
    childVisible: {
      type: Boolean,
      default: false
    },
    childForm: {
      type: Object,
      default: () => ({})
    },
    firstLevel: {
      type: Array,
      default: () => []
    },
    rent_list: {
      type: Array,
      default: () => []
    },
    insure_list: {
      type: Array,
      default: () => []
    },
    zlb_list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    childVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.childForm.clearValidate()
        })
      }
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value && value !== 0) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        parentid: [
          { required: true, message: '请选择一级品类名称', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入二级品类名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
        link: [{ required: true, message: '请输入链接', trigger: 'blur' }],
        image: [{ required: true, message: '请上传封面', trigger: 'change' }],
        displayorder: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        rent_category: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        insurance_category: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        zlb_class: [{ required: true, message: '请选择', trigger: 'change' }],
      }
    }
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    setUrl(val) {
      this.$emit('setUrl', val)
    },
    submitForm(formName) {
      var strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // var reg = new RegExp(strRegex);
          // if (this.childForm.link) {
          //   if (!reg.test(this.childForm.link)) {
          //     this.$message.error("请确保图片链接正确");
          //     return false;
          //   } else {
          //     this.$emit("submitForm", true);
          //   }
          // }
          this.$emit('submitForm', true)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
